import React, { PureComponent } from 'react'
import { PullToRefresh, ListView } from 'antd-mobile'
import PropTypes from 'prop-types'
import Loading from '@/components/Loading'
import css from './index.module.scss'
export default class LoadMore extends PureComponent {
    listRef = React.createRef()
    static propTypes = {
        data: PropTypes.array.isRequired,
        pageSize: PropTypes.number,
        // 默认使用body滚动 如果需要区域滚动设置为false, 并且传入style设置区域高度和overflow:auto
        bodyScroll: PropTypes.bool,
        style: PropTypes.object,
        // 下拉刷新配置
        refreshConfig: PropTypes.object,
        // 一行几列
        column: PropTypes.number,
        enableRefresh: PropTypes.bool,
        // 渲染列表头部
        renderHeader: PropTypes.func,
        // 渲染主要内容
        renderRow: PropTypes.func,
        onRefresh: PropTypes.func,
        onReachEnd: PropTypes.func.isRequired
    }
    static defaultProps = {
        data: [],
        enableRefresh: true,
        bodyScroll: true,
        style: {
            height: 200,
            overflow: 'auto'
        },
        column: 1,
        pageSize: 10
    }

    static getDerivedStateFromProps(props, state) {
        return {
            ...state,
            dataSource: state.dataSource.cloneWithRows(props.data)
        }
    }

    state = {
        dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
        }),
        refreshing: false,
        loading: true,
        complete: false
        // height: document.documentElement.clientHeight
    }

    onRefresh = () => {
        this.startRefresh()
        this.props.onRefresh()
    } 
    
    startRefresh = () => {
        this.setState({
            refreshing: true,
            loading: false
        })
    }

    stopRefresh = () => {
        this.setState({
            refreshing: false,
            loading: false
        })
    }

    startLoading = () => {
        this.setState({
            loading: true,
            complete: false
        })
    }
    stopLoading = () => {
        this.setState({
            loading: false
        })
    }

    complete = () => {
        this.setState({
            complete: true
        })
    }

    isComplete = () => {
        return this.state.complete
    }

    renderHeader = () => {        
        if (typeof this.props.renderHeader === 'function') {
            return this.props.renderHeader()
        } else {
            return null
        }
    }

    handleRow = (rowData, sectionId, rowId) => {
        if (typeof this.props.renderRow === 'function') {
            return this.props.renderRow(rowData, sectionId, rowId)
        } else {
            return null
        }
    }
    
    onEndReached = event => {
        if (this.state.loading || this.state.complete) {
            return;
        }
        this.props.onReachEnd()
    }

    setDatasource = data => {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(data)
        })        
    }

    render() {
        const { refreshing, loading, dataSource, complete } = this.state
        const { pageSize, className, enableRefresh, column, bodyScroll, style, refreshConfig } = this.props
        const cols = column > 1 ? 'list-view-2' : ''
        return (            
            <ListView
                ref={this.listRef}
                className={`${css['list-view']} ${cols && css[cols]} ${className || ''}`}
                dataSource={dataSource}
                initialListSize={pageSize}
                pullToRefresh={enableRefresh ? <PullToRefresh 
                    refreshing={refreshing}
                    indicator={refreshConfig} 
                    onRefresh={this.onRefresh}
                /> : false}
                onEndReachedThreshold={10}
                renderHeader={this.renderHeader}
                renderRow={this.handleRow}
                renderFooter={() => {
                    return loading ? <Loading /> : (complete ? <div style={{'textAlign': 'center'}}>没有更多了</div> : '')
                }}
                pageSize={pageSize}
                style={bodyScroll ? {} : style}
                useBodyScroll={bodyScroll}            
                onEndReached={this.onEndReached}
            />
        )
    }
}
